<template>
  <view class="container">
    <!-- 退订原因部分 -->
    <view class="section">
      <view class="section-title">退订原因</view>

      <view class="reason-options">
        <radio-group class="radio-group" :value="selectedReasonType" @change="selectReason">
          <label class="radio-item" v-for="(item, index) in reasons" :key="index">
            <radio color="#FF7937" :value="item.value" />
            <text>{{ item.label }}</text>
          </label>
        </radio-group>
      </view>

      <view class="reason-input">
        <textarea placeholder="退订详细原因，仅平台方可查看" maxlength="100" v-model="reasonDetail"
          @input="countReasonChars"></textarea>
        <text class="char-count">{{ reasonCharCount }}/100</text>
      </view>
    </view>


    <!-- 投诉部分 -->
    <view class="section">
      <view class="section-title">我要投诉
        <image v-if="!isChecked" class="check-icon" src="/static/personalCenter/un-switch.png" mode="aspectFill"
          @click="isChecked = !isChecked"></image>
        <image v-if="isChecked" class="check-icon" src="/static/personalCenter/on-switch.png" mode="aspectFill"
          @click="isChecked = !isChecked"></image>
      </view>
      <view class="complaint-input">
        <textarea placeholder="投诉详细原因，仅平台方可查看" maxlength="100" v-model="complaintDetail"
          @input="countComplaintChars"></textarea>
        <text class="char-count">{{ complaintCharCount }}/100</text>
      </view>
    </view>

    <view class="divider"></view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submit">提 交</view>

    <!-- 温馨提示 -->
    <view class="tips">
      <view class="tips-title">温馨提示：</view>
      <text class="tips-content">为了保障您的出行安全，请勿使用退订方式协助车主逃费，平台监测到核实后将按照情节严重程度进行扣除诚信值或封禁账号处罚</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false,
      selectedReasonType: null,
      reasons: [
        { label: "我的原因", value: '1' },
        { label: "车主原因", value: '2' },
      ],
      reasonDetail: "",
      complaintDetail: "",
      reasonCharCount: 0,
      complaintCharCount: 0,
      currentTripId: null,
    };
  },
  onLoad(options) {
    console.log(options);

    this.currentTripId = options.id
  },
  methods: {
    selectReason(e) {
      console.log(e);
      this.selectedReasonType = e.detail.value;
    },
    countReasonChars(e) {
      this.reasonCharCount = e.detail.value.length;
    },
    countComplaintChars(e) {
      this.complaintCharCount = e.detail.value.length;
    },
    // 提交
    /*
      "cancel_reason_type": 2, // 退订原因：1-乘客原因，2-车主原因 必填
      "cancel_reason": "车主超时严重", // 退订原因 必填
      "is_complaint": 1, // 是否投诉0-否，1-是 必填
      "complaint_content": "车主超时严重" //  投诉内容。  投诉时必填
    */
    async submit() {

      if (!this.selectedReasonType) {
        uni.showToast({
          title: "请选择退订原因",
          icon: "none",
        });
        return;
      }
      if (!this.reasonDetail) {
        uni.showToast({
          title: "请填写退订的具体原因",
          icon: "none",
        });
        return;
      }
      if (this.isChecked) {
        if (!this.complaintDetail) {
          uni.showToast({
            title: "请填写投诉的具体原因",
            icon: "none",
          });
          return;
        }
      }
      uni.showModal({
        title: "提示",
        content: "确定要退订吗？",
        success: (res) => {
          if (res.confirm) {
            this.submitData()
          }
          if (res.cancel) {
            this.clearInput()
            setTimeout(() => {
              uni.navigateBack()
            }, 1000);
          }
        }
      })
    },
    async submitData() {
      let params = {
        cancel_reason_type: this.selectedReasonType,
        cancel_reason: this.reasonDetail,
        is_complaint: this.isChecked ? 1 : 0,
        complaint_content: this.complaintDetail,
      }
      try {
        const res = await this.$http.post(`/h5/user/trip/cancel/${this.currentTripId}`, params);
        uni.showToast({
          title: "退订成功",
          icon: "success",
        });
        this.clearInput()
        setTimeout(() => {
          uni.navigateBack()
        }, 1000);
      } catch (error) { }
    },
    // 清除输入框内容
    clearInput() {
      this.reasonDetail = "";
      this.complaintDetail = "";
      this.selectedReasonType = null;
      this.isChecked = false;
    }
  },
};
</script>

<style scoped>
.container {
  padding: 20rpx 26rpx;
}

.section {
  background-color: #fff;
  padding: 26rpx 40rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #0B1F20;
  margin-bottom: 26rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title .check-icon {
  width: 56rpx;
  height: 56rpx;
}

.option-group {
  margin-bottom: 30rpx;
}

.option-title {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #0B1F20;
}

.radio-group {
  display: flex;
  align-items: center;
}

.radio-item {
  display: flex;
  align-items: center;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 30rpx;
  color: #0B1F20;
  margin-right: 114rpx;
}

radio {
  margin-right: 10rpx;
  transform: scale(0.8);
}

.reason-input,
.complaint-input {
  position: relative;
  margin-top: 30rpx;
}

textarea {
  width: 100%;
  height: 320rpx;
  padding: 28rpx 24rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 28rpx;
  color: #999999;
  background: #F5F5F6;
  border-radius: 16rpx;
  box-sizing: border-box;
}

.char-count {
  position: absolute;
  right: 24rpx;
  bottom: 28rpx;
  font-size: 28rpx;
  color: #999;
}


.submit-btn {
  background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
  color: #fff;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 16rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 36rpx;
  color: #FFFFFF;
  margin-bottom: 20rpx;
}

.tips {
  padding: 0 38rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 24rpx;
  color: #999999;
  line-height: 48rpx;
}
</style>
